<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频视频插入</title>
</head>
<body>
    <audio src="./img/bird.mp3" controls></audio>
    <video src="./img/wdsj.mp4" style="width: 500px;"
                controls autoplay muted loop></video>
    <!--锚点-->
    <a href="#c1">1</a>
    <a href="#c2">2</a>
    <a href="#c3">3</a>
    <h3 id="c1">第一章</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid at atque corporis cum debitis excepturi
        explicabo facilis in, inventore, mollitia nemo nisi nulla obcaecati odio pariatur quos saepe sit,
        voluptatem?</p>
    <p>A debitis dicta exercitationem ipsum iusto maiores, modi molestiae nisi nobis, quas quos reiciendis,
        reprehenderit sint sunt ullam! A doloribus expedita itaque molestiae molestias non nostrum quam quibusdam
        similique ut?</p>
    <p>Adipisci aut esse neque officia optio similique soluta. Adipisci, aspernatur at, consequatur cupiditate deleniti
        doloremque ea eaque ex, harum iusto laborum nemo neque nesciunt officiis ratione soluta ullam unde
        voluptatem?</p>
    <p>Et fugiat laboriosam modi pariatur, quidem voluptate. A asperiores cupiditate deserunt dicta, distinctio dolore
        eligendi enim iste iure labore libero magni necessitatibus nemo neque possimus quis quod sint soluta unde.</p>
    <p>Consectetur corporis, eligendi enim, error ex fuga laboriosam maxime modi molestiae quas quia quisquam quos sunt
        totam, vel! Ab accusamus dolore enim minima quae quidem sunt temporibus, veritatis! Fugit, tempore.</p>
    <p>Accusamus architecto debitis dolor dolore exercitationem fugiat minima molestias nam non, nostrum odio porro
        praesentium, quo sequi tenetur vero, voluptas? Accusamus animi deleniti dolores magnam molestias, provident sunt
        suscipit voluptatibus!</p>
    <p>Animi asperiores aspernatur ea facilis incidunt inventore nesciunt quae reiciendis veritatis voluptatem. Aperiam
        consequuntur dolores doloribus eligendi fuga illo, magnam, numquam odio optio possimus quia ratione, sequi
        tempore ullam voluptatem!</p>
    <h3 id="c2">第二章</h3>
    <p>Aperiam deserunt dolore doloribus fuga impedit nihil praesentium provident tempore ut, veritatis! Accusamus,
        adipisci aliquid aperiam at consectetur dolorem expedita laudantium modi molestias odio odit quis recusandae
        rerum vel voluptatem.</p>
    <p>A ab accusamus aspernatur assumenda at aut autem beatae dolores dolorum eum fugit id ipsa iure labore, magni
        molestias necessitatibus nisi pariatur perspiciatis quas qui, quisquam ratione recusandae ullam ut.</p>
    <p>In, nostrum, veniam? Accusantium culpa deserunt dolor doloremque eaque eius esse excepturi fuga id ipsam
        mollitia, nesciunt nisi obcaecati possimus quasi quidem repellat sapiente sequi soluta ullam veniam, veritatis
        voluptate!</p>
    <p>Alias, at consequatur, deleniti ducimus explicabo maiores minus nihil nobis numquam odio omnis quisquam quo
        ratione suscipit tenetur voluptate voluptatum! Adipisci dolores ea exercitationem impedit inventore nesciunt
        perspiciatis ratione sequi?</p>
    <p>Debitis, doloremque odio. Alias commodi, doloremque dolores eaque eos est et iure maiores maxime nam optio
        possimus quaerat repellat sed suscipit ut voluptas. Aliquid eaque iste quibusdam, repudiandae tenetur
        voluptatem?</p>
    <p>Aut doloribus earum explicabo inventore iusto minima nemo, nisi, officiis omnis perspiciatis possimus reiciendis
        repellendus, similique? Accusamus architecto aut cupiditate iste necessitatibus neque officiis omnis
        perspiciatis rerum saepe tempora, veritatis?</p>
    <p>A cumque in nisi reprehenderit sapiente soluta! Animi atque aut commodi consequuntur distinctio ducimus,
        exercitationem impedit ipsa modi nobis numquam quia ratione recusandae rerum soluta! Enim provident quo sit
        voluptatem.</p>
    <p>Culpa dicta error esse est eveniet incidunt, ipsam modi numquam perspiciatis quasi quia quidem quos recusandae
        repellendus saepe tempore, voluptas. Cumque modi officiis placeat qui quisquam saepe vero vitae
        voluptatibus!</p>
    <p>A, ab ad asperiores assumenda cum dicta eos laudantium neque, nihil, pariatur sit veniam! Dolorum eveniet illo
        itaque iusto provident quaerat quis suscipit vel vero voluptatem! Alias aliquam eveniet recusandae?</p>
    <p>Asperiores commodi dignissimos dolore eos exercitationem illum incidunt inventore laudantium mollitia nam non
        nostrum nulla officia pariatur porro, quo similique sit suscipit totam ut vero vitae voluptas. Cumque, laborum
        ullam.</p>
    <p>Delectus dolores, earum impedit in quasi sint voluptatem? Assumenda corporis dolorem earum quos repellat
        repellendus, repudiandae saepe sapiente. Cum cumque libero nihil perspiciatis quidem repellendus soluta
        voluptates. Fugit, non ut.</p>
    <p>Dolorum iure nostrum perspiciatis possimus ullam? Ad architecto dicta dolorum earum mollitia nam quae quia sit ut
        voluptatibus! Consequuntur cupiditate dolorum facere ipsum molestias officiis suscipit. Aliquid aspernatur eos
        error?</p>
    <h3 id="c3">第三章</h3> <a href="#c1">第一章</a>
    <p>Dolorum, error, sunt. A alias architecto beatae cupiditate delectus deserunt doloribus error esse facere facilis,
        laudantium minima molestiae neque nihil possimus repellat sed, similique ut veritatis, voluptatem! Consequatur,
        fugiat, voluptates!</p>
    <p>Ab, delectus, officia? Aliquam, commodi cumque exercitationem id ipsam laudantium magni minus officiis, pariatur
        provident quae quas reiciendis saepe sequi suscipit? Adipisci ea harum impedit iusto praesentium sapiente totam
        voluptate!</p>
    <p>Accusantium atque deleniti incidunt iure quae, sequi sit voluptatum? Expedita fugit, magni non odio quo
        repellendus saepe sequi velit veniam. Atque commodi doloremque eveniet expedita harum repudiandae saepe tempore
        vero?</p>
    <p>A eos fugit laudantium quis sed temporibus. Alias asperiores beatae, culpa earum esse et explicabo hic illum
        laudantium modi non odit praesentium quasi qui quibusdam reiciendis rem rerum sint, sunt.</p>
    <p>Accusamus aut consequuntur error esse et illo iste labore mollitia odio, placeat quos, ratione suscipit tempora.
        Magni neque nisi quod rem repellat, repudiandae sit temporibus vitae. Beatae dolores error non!</p>
    <p>Dolorum eligendi inventore magni numquam quos tenetur vitae. Aliquam at cum distinctio ea eligendi eos ipsam
        ipsum iure laborum, magnam maxime minus perspiciatis quo, similique temporibus velit voluptatibus. At,
        mollitia.</p>
    <p>Amet aut cupiditate harum hic illo incidunt inventore iure molestias mollitia, natus numquam quas quis quo,
        repellendus, saepe sint sunt. Ab accusantium exercitationem inventore ipsum laboriosam non numquam placeat!
        In.</p>
    <p>Aliquid amet at cumque, dolores, ducimus eveniet iure iusto magni mollitia necessitatibus nihil obcaecati quae
        quia ratione rem reprehenderit sed voluptatum? Dolorem facere natus nihil porro quae quidem, rem voluptate?</p>
    <p>Ab aspernatur consectetur, dicta distinctio dolores excepturi explicabo fugit laudantium mollitia praesentium
        quas quibusdam repudiandae sequi veniam voluptatum. Magni, mollitia voluptates. Dolorum explicabo harum, optio
        rem tempora ut vel veritatis?</p>
    <p>Animi, blanditiis debitis dicta fugiat nam officia quod ratione? Amet atque cum deleniti doloremque dolorum,
        ducimus eum facilis magnam molestias neque numquam porro quasi sequi similique unde voluptas voluptate,
        voluptatibus?</p>
    <p>Alias autem consequuntur corporis delectus eos ex incidunt maiores, molestias non nostrum optio porro praesentium
        quos tenetur veniam vitae voluptatibus. Accusantium aut, dignissimos error eum fuga illo nihil quas vel!</p>
    <a href="#">滚上边</a>
</body>
</body>
</html>